<template>
	<xbd-pages-content :title="title">
		<template #content>
			<view class="management">
				<view v-if="userInfo.user_role === 'leader'" class="fixed" :style="'top: ' + top + ';'">
					<v-tabs
						v-model="current"
						:tabs="tabs"
						@change="changeTab"
						pills
						paddingItem="0 106rpx"
						
					></v-tabs>
				</view>
				<view v-if="userInfo.user_role === 'leader'" :style="'height: 70px;'"></view>
				<view class="management-content">
					<view class="card-box">
						<xbd-card title="今日进入" :num="count.enter" isBlue @clickCard="clickGo('enter')"></xbd-card>
						<xbd-card title="今日离开" :num="count.leave" :isBlue="false" @clickCard="clickGo('leave')"></xbd-card>
						<xbd-card v-if="current===1" title="白名单" :num="count.whiteList" isBlue @clickCard="clickNameList(0)"></xbd-card>
						<xbd-card v-if="current===1" title="黑名单" :num="count.blacklist" :isBlue="false" @clickCard="clickNameList(1)"></xbd-card>
					</view>
					<view class="traffic-status" v-if="current === 1">
						<xbd-title :title="'今日' + title.slice(0, 2) + '通行状况'"></xbd-title>
						<view class="charts">
							<chart-two-smooth-line :chart-data="trafficConditions"></chart-two-smooth-line>
						</view>
					</view>
					<view class="traffic-status" v-if="current === 1">
						<xbd-title :title="'今日' + title.slice(0, 2) + '通行异常统计'"></xbd-title>
						<view class="charts">
							<chart-line-area :chart-data="trafficAnomaly"></chart-line-area>
						</view>
					</view>
					<xbd-title title="通行记录">
						<template #default>
							<view class="go-leave">
								<text :class="['go', queryInfo.direction === 'enter' ? 'active' : '']" @click="clickLeave('enter', true)">进入</text>
								<text :class="[queryInfo.direction === 'leave' ? 'active' : '']" @click="clickLeave('leave', true)">离开</text>
							</view>
						</template>
					</xbd-title>
					<view class="search" v-if="current === 0">
						<!-- #ifdef APP-PLUS || H5 -->
						<picker mode="date" :value="date" fields="day" :start="startDate" :end="endDate" @change="DateChange">
						    <view class="date">
								<image class="date-img" src="@/static/images/common/date.svg" mode=""></image>
								<text>{{ date }}</text>
							</view>
						</picker>
						<!-- #endif -->
						<!-- #ifndef APP-PLUS || H5 -->
						<xbd-date-picker fields="day" :date="date" :visible.sync="visible1" @setDate="setDateChange">
							<template>
								<view class="date" @click="visible1 = true">
									<image class="date-img" src="@/static/images/common/date.svg" mode=""></image>
									<text>{{ date }}</text>
								</view>
							</template>
						</xbd-date-picker>
						<!-- #endif -->
					</view>
					<view class="search1" v-else>
						<!-- #ifdef APP-PLUS || H5 -->
						<picker mode="date" :value="date" fields="day" :start="startDate" :end="endDate" @change="bindDateChange">
						    <view class="date">
								<image class="date-img" src="@/static/images/common/date.svg" mode=""></image>
								<text>{{ date }}</text>
							</view>
						</picker>
						<!-- #endif -->
						<!-- #ifndef APP-PLUS || H5 -->
						<xbd-date-picker fields="day" :date="date" :visible.sync="visible2" @setDate="setDate">
							<template>
								<view class="date" @click="visible2 = true">
									<image class="date-img" src="@/static/images/common/date.svg" mode=""></image>
									<text>{{ date }}</text>
								</view>
							</template>
						</xbd-date-picker>
						<!-- #endif -->
						<uni-easyinput
							class="ipt"
							v-model="keyword"
							:placeholder="!!~title.indexOf('人员') ? '搜索人员姓名查询' : '搜索车牌号查询'"
							placeholderStyle="color: #999;"
						></uni-easyinput>
						<image src="@/static/images/common/search.svg" class="search-svg" @click="search"></image>
					</view>
					<uni-list v-if="list.length"  :border="false">
						<uni-list-chat
							v-for="(item, index) in list"
							:key="index"
							:avatarCircle="title === '人员管理'"
							:title="item.pass_name"
							:avatar="item.pass_avatar | imgFormat(title !== '人员管理')"
							:note="title === '人员管理' ? (item.pass_department === '-' ? '访客': item.pass_department) : item.pass_plate"
							:time="item.created_at | timeFormat('YYYY-MM-DD HH:mm:ss')"
							:clickable='true'
							@click="clickCard(item._id)"
						></uni-list-chat>
						<xbd-loading-more :status-num="statusNum" :is-load-more="!!list.length && isLoadMore" @more="goLoadMore"></xbd-loading-more>
					</uni-list>
				</view>
				<uni-load-more
					v-if="loading"
					status="loading"
					:iconSize="12"
					:contentText="{
						contentdown: '上拉显示更多',
						contentrefresh: '正在加载...',
						contentnomore: '到底了~'
				}"></uni-load-more>
				<xbd-null-list v-if="!list.length && !loading"></xbd-null-list>
			</view>
		</template>
	</xbd-pages-content>
</template>

<script>
	import { mapState } from 'vuex';
	var dayjs = require('dayjs');
	import { Person, Vehicle } from '@/api/index.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				title: '',
				current: 0,
				statusNum: 2,
				isLoadMore: false,
				visible1: false,
				visible2: false,
				loading: false,
				tabs: ['我的通行', '全部通行'],
				top: '',
				date: currentDate,
				list: [],
				keyword: '',
				count: {
					enter: 0,
					leave: 0,
					blacklist: 0,
					whiteList: 0
				},
				queryInfo: {
					page: 0,
					perpage: 10,
					direction: 'enter',
					date: '', // 日期
					keyword: '', // 搜索关键字
					type: 'my' // 我的通行 或 全部通行
				},
				trafficConditions: {
					name: ['进入', '离开'],
					color: ['#457AFF', '#222222'],
					unit: '人',
					x: 'x',
					y: ['y', 'series'],
					data: [
					]
				},
				trafficAnomaly: {
					name: '异常',
					color: '#ff7543',
					unit: '人',
					x: 'x',
					y: 'y',
					data: []
				}
			};
		},
		methods: {
				
			clickCard(id){
				if(id === '-'){
					uni.showToast({
						title: '暂无人员详情信息',
						icon: 'none',
					})
				}else{
					uni.navigateTo({
						url:`./peopledetail?id=${id}&title=${this.title}`
					})
				}
			},
			// 加载更多
			async loadmore() {
				this.queryInfo.page++;
				this.statusNum = 1;
				this.isLoadMore = true;
				if (this.title === '人员管理') {
					// 加载人员列表
					await this.loadMorePersonList();
				} else {
					// 加载车辆列表
					await this.loadMoreVehicleList();
				}
			},
			async goLoadMore() {
				if (!this.isLoading) {
					this.isLoading = true;
					if (this.isLoadMore && this.statusNum !== 0) {
						await this.loadmore();
					}
					this.isLoading = false;
				}
			},
			async loadMorePersonList() {
				try{
					this.timer = ''
					const res = await Person.getPersonPassList(this.queryInfo);
					if (res.success) {
						if (res.data.data.length) {
							this.list = this.list.concat(res.data.data);
							if (res.data.data.length === this.queryInfo.perpage) {
								this.isLoadMore = true;
								this.statusNum = 2;
							} else {
								this.statusNum = 0;
							}
						} else {
							this.statusNum = 0;
							this.queryInfo.page--;
						}
					}
				} catch(e) {
					this.queryInfo.page--;
					// uni.hideLoading();
				}
			},
			async loadMoreVehicleList() {
				clearTimeout(this.timer);
				this.timer = setTimeout(async () => {
					try{
						const res = await Vehicle.getVehiclePassList(this.queryInfo);
						if (res.success) {
							if (res.data.data.length) {
								this.list = this.list.concat(res.data.data);
								if (res.data.data.length === this.queryInfo.perpage) {
									this.isLoadMore = true;
									this.statusNum = 2;
								} else {
									this.statusNum = 0;
								}
							} else {
								this.statusNum = 0;
								this.queryInfo.page--;
							}
						}
					} catch(e) {
						this.queryInfo.page--;
						// uni.hideLoading();
					}
				}, 0)
			},
			clickGo(str) {
				this.date = this.getDate();
				this.queryInfo.date = this.date;
				this.keyword = '';
				this.queryInfo.keyword = '';
				if (this.current) {
					uni.pageScrollTo({
						scrollTop: 560, //距离页面顶部的距离
						duration: 200
					});
					this.clickLeave(str);
				} else {
					uni.pageScrollTo({
						scrollTop: 0, //距离页面顶部的距离
						duration: 200
					});
					this.clickLeave(str);
				}
			},
			clickNameList(inx) {
				let title = '';
				if (this.title === '人员管理') {
					title = '人员';
				}else {
					title = '车辆';
				}
				if (inx === 0) {
					title += '白名单';
				} else {
					title += '黑名单';
				}
				uni.navigateTo({
					url: './namelist?title=' + title,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// tab切换
			changeTab(index) {
				uni.pageScrollTo({
					scrollTop: 0, //距离页面顶部的距离
					duration: 0
				});
				this.list = [];
				this.queryInfo.page = 0;
				this.date = this.getDate();
				this.keyword = '';
				this.queryInfo.date = '';
				this.queryInfo.keyword = '';
				this.queryInfo.direction = 'enter';
				this.isLoadMore = false;
				if (index === 0) {
					this.queryInfo.type = 'my';
				} else {
					this.queryInfo.type = 'all';
				}
				// 发请求 修改列表数据
				if (this.title === '人员管理') {
					// 获取人员列表
					this.personInit();
				} else {
					// 获取车辆列表
					this.vehicleInit();
				}
			},
			// 进入离开 按钮切换
			async clickLeave(str, flag) {
				
				this.isLoadMore = false;
				this.queryInfo.direction = str;
				this.queryInfo.page = 0;
				this.date = this.getDate();
				console.log(this.date,'this.date')
				if (flag) {
					this.queryInfo.date = '';
					this.keyword = '';
					this.queryInfo.keyword = '';
				}
				// 发请求 修改列表数据
				if (this.title === '人员管理') {
					this.getPersonList();
				} else {
					this.getVehicleList();
				}
			},
			// 带input的 日期选择器 数据绑定函数
			bindDateChange: function(e) {
			    this.date = e.target.value;
			},
			setDate(date) {
				this.date = date;
			},
			// 不带input的日期选择器 选择完直接发起请求
			DateChange(e) {
				this.isLoadMore = false;
				this.date = e.target.value;
				this.queryInfo.date = e.target.value;
				this.queryInfo.page = 0;
				if (this.title === '人员管理') {
					this.getPersonList();
				} else {
					this.getVehicleList();
				}
			},
			setDateChange(date) {
				this.isLoadMore = false;
				this.date = date;
				this.queryInfo.date = date;
				this.queryInfo.page = 0;
				if (this.title === '人员管理') {
					this.getPersonList();
				} else {
					this.getVehicleList();
				}
			},
			// 搜索按钮点击函数
			search() {
				this.isLoadMore = false;
				this.queryInfo.page = 0;
				if (this.date !== '请选择日期') {
					this.queryInfo.date = this.date;
				}
				this.queryInfo.keyword = this.keyword;
				if (this.title === '人员管理') {
					this.getPersonList();
				} else {
					this.getVehicleList();
				}
			},
			// 获取时间函数
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
		
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year;
			    }
			    month = month > 9 ? month : '0' + month;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			// 获取人员列表
			async getPersonList() {
				clearTimeout(this.timer);
				this.timer = setTimeout(async () => {
					try{
						// this.list = [];
						this.loading = true;
						this.$showLoading('加载中');
						const res = await Person.getPersonPassList(this.queryInfo);
						uni.hideLoading();
						this.loading = false;
						if (res.success) {
							this.list = res.data.data;
							if (res.data.data.length === this.queryInfo.perpage) {
								this.isLoadMore = true;
								this.statusNum = 2;
							} else {
								this.statusNum = 0;
							}
						}
					} catch(e) {
						// uni.hideLoading();
						this.loading = false;
					}
				}, 0)
			},
			// 获取车辆列表
			async getVehicleList() {
				clearTimeout(this.timer);
				this.timer = setTimeout(async () => {
					try{
						this.$showLoading('加载中');
						this.loading = true;
						const res = await Vehicle.getVehiclePassList(this.queryInfo);
						console.log(res,'车辆')
						this.loading = false;
						uni.hideLoading();
						if (res.success) {
							
							this.list = res.data.data;
							if (res.data.data.length === this.queryInfo.perpage) {
								this.isLoadMore = true;
								this.statusNum = 2;
							} else {
								this.statusNum = 0;
							}
						}
					} catch(e) {
						this.loading = false;
						// uni.hideLoading();
					}
				}, 0)
			},
			// 人员初始化
			personInit() {
				const list = [
					Person.getPersonPassCount(this.queryInfo.type),
					Person.getPersonPassList(this.queryInfo),
					Person.getPersonCharts('situation'),
					Person.getPersonCharts('warn')
				];
				this.$showLoading('加载中');
				Promise.all(list)
					.then((res) => {
						uni.hideLoading();
						this.count = res[0].data.count;
						this.list = res[1].data.data;
						this.trafficConditions.data = res[2].data.chart;
						this.trafficAnomaly.data = res[3].data.chart;
						if (res[1].data.data.length === this.queryInfo.perpage) {
							this.isLoadMore = true;
							this.statusNum = 2;
						} else {
							this.statusNum = 0;
						}
					})
					.catch((e) => {
						uni.hideLoading();
					})
			},
			// 车辆初始化
			vehicleInit() {
				const list = [
					Vehicle.getVehiclePassCount(this.queryInfo.type),
					Vehicle.getVehiclePassList(this.queryInfo),
					Vehicle.getVehicleCharts('situation'),
					Vehicle.getVehicleCharts('warn')
				];
				this.$showLoading('加载中');
				Promise.all(list).then((res) => {
					console.log(res,'车辆2')
					uni.hideLoading();
					this.count = res[0].data.count;
					this.list = res[1].data.data;
					this.trafficConditions.data = res[2].data.chart;
					this.trafficAnomaly.data = res[3].data.chart;
					if (res[1].data.data.length === this.queryInfo.perpage) {
						this.isLoadMore = true;
						this.statusNum = 2;
					} else {
						this.statusNum = 0;
					}
				}).catch((e) => {
					uni.hideLoading();
				})
			},
			editTitle() {
				uni.setNavigationBarTitle({
					title: this.title
				})
			}
		},
		computed: {
			...mapState(['userInfo']),
			// contentHeight() {
			// 	if (this.userInfo.user_role === 'leader') {
			// 		if (this.current === 1) {
			// 			return '220px';
			// 		} else {
			// 			return '150px';
			// 		}
			// 	} else {
			// 		return '105px';
			// 	}
				
			// },
			startDate() {
			    return this.getDate('start');
			},
			endDate() {
			    return this.getDate('end');
			}
		},
		onLoad(res) {
			const { statusBarHeight } = uni.getSystemInfoSync();
			// #ifdef APP-PLUS || H5  
			this.top = statusBarHeight + 44 + 'px';
			// #endif
			// #ifndef APP-PLUS || H5
			this.top = '0px';
			// #endif
			if (res.name === 'people') {
				this.title = '人员管理';
				this.trafficConditions.unit = '人'; // 图表单位
				this.trafficAnomaly.unit = '人'; // 图表单位
				// 初始化数据
				this.personInit();
			} else {
				this.title = '车辆管理';
				this.trafficConditions.unit = '辆'; // 图表单位
				this.trafficAnomaly.unit = '辆'; // 图表单位
				// 初始化数据
				this.vehicleInit();
			}
			// #ifndef APP-PLUS || H5
			this.editTitle();
			// #endif
		},
		async onReachBottom() {
			// 上拉加载
			await this.goLoadMore();
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-list-chat__content-title {
		font-size: 14px;
		color: #457AFF;
	}
	::v-deep .uni-list-chat__content-note {
		color: $uni-text-color;
	}
	::v-deep .uni-list-chat__container {
		padding: 10px 0;
	}
	::v-deep .uni-list-chat__content-main {
		padding-left: 40rpx;
	}
	::v-deep .uni-easyinput__content {
		min-height: 32px;
	}
	::v-deep .uni-list-chat {
		border-bottom: 1px solid #EEEEEE;
	}
	::v-deep .v-tabs {
		margin-bottom: 10px;
	}
	::v-deep .uni-easyinput__content-input {
		
		font-size: 28rpx;
	}
	::v-deep .xbd-null-list {
		margin-bottom: 20px;
	}
	.management {
		.fixed {
			position: fixed;
			padding: 20px 50rpx 10px ;
			width: 750rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			z-index: 999;
			
		}
		&-content {
			padding:10px 50rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			.card-box {
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-bottom: 10px;
			}
			.traffic-status {
				margin-bottom: 20px;
				.xbd-title {
					margin-bottom: 20px;
				}
				.charts {
					width: 720rpx;
					height: 180px;
					margin-left: -35rpx;
					
					box-sizing: border-box;
				}
			}
			.go-leave {
				font-size: 14px;
				
				color: $uni-text-color;
				.active {
					color: #457AFF;
				}
				.go {
					margin-right: 40rpx;
				}
			}
			.search {
				display: flex;
				margin: 20px 0 10px 0;
				.date {
					display: flex;
					align-items: center;
					width: 650rpx;
					height: 32px;
					border: 1px solid #E9ECF7;
					
					font-size: 28rpx;
					
					color: #999;
					
					box-sizing: border-box;
					.date-img {
						width: 32rpx;
						height: 32rpx;
						margin: 24rpx;
					}
				}
			}
			.search1 {
				display: flex;
				align-items: center;
				margin: 20px 0 10px 0;
				.date {
					display: flex;
					align-items: center;
					width: 240rpx;
					height: 32px;
					margin-right: 20rpx;
					border: 1px solid #E9ECF7;
					
					font-size: 28rpx;
					
					color: #999;
					
					box-sizing: border-box;
					.date-img {
						width: 32rpx;
						height: 32rpx;
						margin: 24rpx 15rpx 24rpx 24rpx;
					}
				}
				.search-svg {
					width: 40rpx;
					height: 40rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
